<template>
    <div class="shangpinxinxi-add" v-loading="loading">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span class="title"> 添加商品信息</span>
            </div>
            <div class="form-database-form">
                <el-form :model="form" ref="formModel" label-width="130px" status-icon validate-on-rule-change>
                    <el-form-item label="商品编号" prop="shangpinbianhao" :rules="[{required:true, message:'请填写商品编号'}]">
                        <el-input type="text" placeholder="输入商品编号" style="width: 250px" v-model="form.shangpinbianhao" />
                    </el-form-item>

                    <el-form-item label="游戏分类" prop="youxifenlei">
                        <el-select v-model="form.youxifenlei"><e-select-option type="option" module="youxifenlei" value="id" label="fenleimingcheng"></e-select-option></el-select>
                    </el-form-item>

                    <el-form-item label="所属游戏" prop="suoshuyouxi" required :rules="[{required:true, message:'请填写所属游戏'}]">
                        <el-select v-model="form.suoshuyouxi"><e-select-option type="option" module="youxixinxi" value="id" label="youximingcheng"></e-select-option></el-select>
                    </el-form-item>

                    <el-form-item label="道具类型" prop="daojuleixing" required :rules="[{required:true, message:'请填写道具类型'}]">
                        <el-select v-model="form.daojuleixing"
                            ><el-option label="皮肤" value="皮肤"></el-option>
                            <el-option label="角色" value="角色"></el-option>
                            <el-option label="武器装备" value="武器装备"></el-option>
                            <el-option label="坐骑" value="坐骑"></el-option>
                            <el-option label="加成道具" value="加成道具"></el-option>
                            <el-option label="卡类" value="卡类"></el-option>
                            <el-option label="其它" value="其它"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="商品名称" prop="shangpinmingcheng">
                        <el-input type="text" placeholder="输入商品名称" style="width: 450px" v-model="form.shangpinmingcheng" />
                    </el-form-item>

                    <el-form-item label="库存" prop="kucun" required :rules="[{required:true, message:'请填写库存'}, {validator:rule.checkNumber, message:'输入一个有效数字'}]">
                        <el-input type="number" placeholder="输入库存" style="width: 250px" v-model.number="form.kucun" />
                    </el-form-item>

                    <el-form-item label="图片" prop="tupian"> <e-upload-image v-model="form.tupian"></e-upload-image> </el-form-item>

                    <el-form-item label="价格" prop="jiage" required :rules="[{required:true, message:'请填写价格'}, {validator:rule.checkNumber, message:'输入一个有效数字'}]">
                        <el-input type="number" placeholder="输入价格" style="width: 250px" v-model.number="form.jiage" />
                    </el-form-item>

                    <el-form-item label="发布人" prop="faburen"> <el-input v-model="form.faburen" readonly style="width: 250px"></el-input> </el-form-item>

                    <el-form-item label="商品描述" prop="shangpinmiaoshu"> <e-editor v-model="form.shangpinmiaoshu"></e-editor> </el-form-item>

                    <el-form-item v-if="btnText">
                        <el-button type="primary" @click="submit">{{ btnText }}</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</template>
<style type="text/scss" scoped lang="scss">
    .shangpinxinxi-add {
    }
</style>
<script>
    import api from "@/api";
    import rule from "@/utils/rule";
    import { extend } from "@/utils/extend";

    export default {
        name: "shangpinxinxi-add",
        data() {
            return {
                rule,
                loading: false,
                form: {
                    shangpinbianhao: rule.getID(),
                    youxifenlei: "",
                    suoshuyouxi: "",
                    daojuleixing: "",
                    shangpinmingcheng: "",
                    kucun: "",
                    tupian: "",
                    jiage: "",
                    faburen: this.$store.state.user.session.username,
                    shangpinmiaoshu: "",
                },
            };
        },
        watch: {},
        props: {
            isRead: {
                type: Boolean,
                default: true,
            },
            btnText: {
                type: String,
                default: "提交",
            },
        },

        computed: {},
        methods: {
            submit() {
                this.$refs.formModel
                    .validate()
                    .then((res) => {
                        if (this.loading) return;
                        this.loading = true;
                        var form = this.form;

                        this.$post(api.shangpinxinxi.insert, form)
                            .then((res) => {
                                this.loading = false;
                                if (res.code == api.code.OK) {
                                    this.$message.success("添加成功");
                                    this.$emit("success", res.data);
                                    this.$refs.formModel.resetFields();
                                    this.loadInfo();
                                } else {
                                    this.$message.error(res.msg);
                                }
                            })
                            .catch((err) => {
                                this.loading = false;
                                this.$message.error(err.message);
                            });
                    })
                    .catch((err) => {
                        console.log(err.message);
                    });
            },
            loadInfo() {
                var form = this.form;
                // 获取模块得数据
                this.loading = true;
                this.$post(api.shangpinxinxi.create, {
                    id: this.$route.query.id,
                })
                    .then((res) => {
                        this.loading = false;
                        if (res.code == api.code.OK) {
                            extend(this, res.data);
                        } else {
                            this.$message.error(res.msg);
                            this.$router.go(-1);
                        }
                    })
                    .catch((err) => {
                        this.$message.error(err.message);
                        this.$router.go(-1);
                    });
            },
        },
        created() {
            this.loadInfo();
        },
        mounted() {},
        destroyed() {},
    };
</script>
